<template>
    <div style="display: flex;">
        <div class="wrap">
            <div class="border"></div>
            <div class="border"></div>
            <div class="border"></div>
            <div class="border"></div>
        </div>

        <div class="xx" info="虚线边框动画">
        </div>
        <div class="ch" info="彩虹边框">
        </div>
        <div class="zg" info="质感边框">
        </div>
    </div>
    <svg width="150" height="150" class="rotate">
        <rect x="5" y="5" rx="20" ry="20" width="140" height="140" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
        <circle cx="75" cy="75" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

    <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>

    <div class="clip-path"></div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.clip-path {
    position: relative;
    width: 200px;
    height: 200px;

    &::after,
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid gold;
        animation: clippath 3s infinite linear;
    }
    &::after {
        animation: clippath 3s infinite -1.5s linear;
    }
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 95% 0 0);
    }
    50% {
        clip-path: inset(95% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 95%);
    }
}
.wrap {
    margin: 50px;
    height: 200px;
    width: 200px;
    display: inline-block;
    position: relative;
}

.border:nth-child(1) {
    border: 5px dashed red;
    position: absolute;
    top: -10px;
    bottom: 10px;
    left: -10px;
    animation: horse-race-lamp-y 0.5s linear infinite;
}

.border:nth-child(2) {
    border: 5px dashed red;
    position: absolute;
    left: -10px;
    right: 10px;
    top: -10px;
    animation: horse-race-lamp-x 0.5s linear infinite reverse;
}

.border:nth-child(3) {
    border: 5px dashed red;
    position: absolute;
    top: -10px;
    bottom: 10px;
    right: -10px;
    animation: horse-race-lamp-y 0.5s linear infinite reverse;
}

.border:nth-child(4) {
    border: 5px dashed red;
    position: absolute;
    left: -10px;
    right: 10px;
    bottom: -10px;
    animation: horse-race-lamp-x 0.5s linear infinite;
}

@keyframes horse-race-lamp-y {
    100% {
        transform: translateY(20px);
    }
}

@keyframes horse-race-lamp-x {
    100% {
        transform: translateX(20px);
    }
}
//虚线边框动画
.xx {
    margin: 50px;
    height: 200px;
    width: 200px;
    background: linear-gradient(90deg, red 50%, transparent 0) repeat-x,
        linear-gradient(90deg, red 50%, transparent 0) repeat-x,
        linear-gradient(0deg, red 50%, transparent 0) repeat-y,
        linear-gradient(0deg, red 50%, transparent 0) repeat-y;
    background-size: 10px 5px, 10px 5px, 5px 10px, 5px 10px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: linearGradientMove 0.3s infinite linear;
}
@keyframes linearGradientMove {
    100% {
        background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px;
    }
}
// 彩虹边框
.ch {
    --borderWidth: 12px;
    --bRadius: 5px;
    margin: 50px;
    height: 200px;
    width: 200px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 2rem;
    z-index: 0;
    border-radius: --bRadius;

    &::after,
    &::before {
        box-sizing: border-box;
    }

    &::before {
        content: "";
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        z-index: -2;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953),
            linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
            linear-gradient(#377af5, #377af5);
        animation: rotate 4s linear infinite;
        @keyframes rotate {
            100% {
                transform: rotate(1turn);
            }
        }
    }
    &::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: calc(var(--borderWidth) / 2);
        top: calc(var(--borderWidth) / 2);
        width: calc(100% - var(--borderWidth));
        height: calc(100% - var(--borderWidth));
        background: white;
        border-radius: --bRadius;
        /*  这一行是为了方便查看原来的样子的 */
        // animation: opacityChange 3s infinite alternate;
    }
    @keyframes opacityChange {
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0.5;
        }
    }
}
//质感边框
@keyframes opacityChange {
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}
.zg {
    --borderWidth: 12px;
    --bRadius: 10px;
    margin: 50px;
    height: 200px;
    width: 200px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 2rem;
    z-index: 0;
    border-radius: --bRadius;

    &::after,
    &::before {
        box-sizing: border-box;
    }
    &::before {
        content: "";
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-color: #1a232a;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(
            transparent,
            rgba(168, 239, 255, 1),
            transparent 30%
        );
        animation: rotate 4s linear infinite;
    }

    &::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: calc(var(--borderWidth) / 2);
        top: calc(var(--borderWidth) / 2);
        width: calc(100% - var(--borderWidth));
        height: calc(100% - var(--borderWidth));
        background: #000;
        border-radius: 5px;
        /* 这句效果打开有助于理解动画 */
        // animation: opacityChange 5s infinite linear;
    }
}

//
.rotate {
    animation: aaa 1s linear infinite;
    @keyframes aaa {
        100% {
            transform: rotate(90deg);
        }
    }
}
</style>